<template>
	<view class="select-box" @click="selectClick">
		<view v-if="selected" class="selct-s">
			<uni-icons :type="icon" color="#ffffff" size="15"></uni-icons>
		</view>
		<view v-else class="selct-c"></view>
		<view class="title">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name:"select-box",
		props: {
			
			selected: {
				type: Boolean,
				default: false
			},
			icon: {
				type: String,
				default: 'checkmarkempty'
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			
			selectClick() {
				this.$emit('click')
			}
		}
	}
</script>

<style scoped>
	
	.select-box {
		display: flex;
		align-items: center;
		border-radius: 4px;
		border: #73738f 1px solid;
		height: 25px;
	}
	
	.select-box:hover {
		cursor: pointer;
		opacity: 0.9;
	}
	
	.select-box:active {
		opacity: 0.6;
	}
	
	.title {
		color: #73738f;
		margin-right: 4px;
		font-size: 14px;
		margin-left: 2px;
	}
	
	.selct-c {
		margin-left: 4px;
		border-radius: 3px;
		border: #73738f 1px solid;
		width: 15px;
		height: 15px;
	}
	
	.selct-s {
		margin-left: 4px;
		border-radius: 3px;
		background-color: #ff2440;
		width: 17px;
		height: 17px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
</style>